<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 地区软文管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            软文主题名
            <el-input v-model="search.name" placeholder="软文主题名" class="handle-input mr10" @change="baseSearch"></el-input>
            城市
            <el-select v-model="search.region" clearable placeholder="请选择">
                <el-option label="全部" value="" @click.native="shiClick(item)"></el-option>
                <el-option
                    v-for="item in shiList"
                    :key="item.id"
                    :label="item.areaName"
                    :value="item.id"
                    @click.native="shiClick(item)" 
                ></el-option>
            </el-select>
            地区
            <el-select v-model="search.regions" clearable placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option
                    v-for="item in quList"
                    :key="item.id"
                    :label="item.areaName"
                    :value="item.id"
                    @click.native="quClick(item)"
                ></el-option>
            </el-select>
            导航菜单类型
            <el-select v-model="search.searchMenuType" placeholder="全部" clearable class="handle-select mr10">
                <el-option key="99" label="全部" value=""></el-option>
                <el-option key="0" label="城市商机" value="0"></el-option>
                <el-option key="1" label="城市故事" value="1"></el-option>
                <el-option key="2" label="城市会友" value="2"></el-option>
                <el-option key="3" label="特色伴礼" value="3"></el-option>
            </el-select> 
            <el-button type="primary" icon="el-icon-search" @click="baseSearch">搜索</el-button>
            <div class="div-add" style="display: block">
                <el-button style="margin: 10px 0px" type="primary" @click="addCity">+ 新增地区软文</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="index" label="位置" width="50" align="center"> </el-table-column>
                <el-table-column prop="articleTitle" label="软文主题" width="200" align="center"></el-table-column>
                <el-table-column prop="articleIntroduce" label="软文简介" width="240"  align="center"></el-table-column>
                <el-table-column prop="cityName" label="城市名" align="center"></el-table-column>
                <el-table-column prop="districtName" label="地区名" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200" align="center"></el-table-column>
                <el-table-column prop="orderLevel" label="权重值" width="80" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.orderLevel == ''">/</span>
                        <span v-else>{{ scope.row.orderLevel }}</span>
                    </template> 
                </el-table-column>
                <el-table-column label="导航菜单类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.menuType == 0">城市商机</span>
                        <span v-else-if="scope.row.menuType == 1">城市故事</span>
                        <span v-else-if="scope.row.menuType == 2">城市会友</span>
                        <span v-else>特色伴礼</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="toDetail(scope.$index, scope.row)">查看</el-button>
                        <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>

        <!-- =====================================新增弹出框================================ -->
        <el-dialog :visible.sync="addVisible" width="80%" @close="dialogClose">
            <el-form ref="form" label-width="130px">
                <h2>新增软文</h2>
                <el-form-item>
                    <el-form-item label="软文主题">
                        <el-input v-model="article.articleTitle" placeholder="请输入软文主题" class="w600"></el-input>
                    </el-form-item>
                    <el-form-item label="软文简介">
                        <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入软文简介"
                            v-model="article.articleIntroduce"
                            class="w600"
                        ></el-input>
                    </el-form-item>
                    <h2>地区软文</h2>
                    <el-form-item label="城市">
                        <el-select clearable placeholder="请选择" v-model="addRegion">
                            <el-option
                                v-for="item in shiList"
                                :key="item.id"
                                :label="item.areaName"
                                :value="item.id"
                                @click.native="shiClick(item)"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="地区">
                        <el-select clearable placeholder="请选择" v-model="addRegions">
                            <el-option
                                v-for="item in quList"
                                :key="item.id"
                                :label="item.areaName"
                                :value="item.id"
                                @click.native="quClick(item)"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详情浏览数">
                        <el-input v-model="article.visitNum" class="w600"></el-input>
                    </el-form-item>
                    <el-form-item label="权重值">
                        <el-input v-model="article.orderLevel" class="w600"></el-input>
                    </el-form-item>
                    <el-form-item label="导航菜单类型">
                        <el-radio-group v-model="DistrictArticle.menuType">
                            <el-radio :key="0" :label="0">城市商机</el-radio>
                            <el-radio :key="1" :label="1">城市故事</el-radio>
                            <el-radio :key="2" :label="2">城市会友</el-radio>
                            <el-radio :key="3" :label="3">特色伴礼</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!-- // 图片资源组或视频 -->
                    <el-form-item label="选择图片组或视频">
                        <el-radio v-model="imgOrVideo" :label="0">图片</el-radio>
                        <el-radio v-model="imgOrVideo" :label="1">视频</el-radio>
                    </el-form-item>
                  
                    <el-form-item label="文件资源集合" v-if="imgOrVideo == 0">
                        <el-upload
                            class="upload-demo"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            list-type="picture"
                            :data="articleResourceListMark"
                            :on-success="articleResourceListSuccess"
                            :before-upload="imgBeforeUpload"

                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
                        </el-upload>
                    </el-form-item>
                    
                    <el-form-item label="软文介绍视频" v-if="imgOrVideo == 1">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :on-success="introduceVideoEvent"
                            :before-upload="videoBeforeUpload"
                            :data="introduceVideoMark"
                        >
                            <video v-if="DistrictArticle.introduceVideo" :src="DistrictArticles.introduceVideo" class="avatar" controls />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="视频封面图" v-if="imgOrVideo == 1">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :on-success="introduceVCSEvent"
                            :before-upload="imgBeforeUpload"
                            :data="introduceVCSMark"
                        >
                            <img v-if="DistrictArticle.introduceVCS" :src="DistrictArticles.introduceVCS" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <!-- -------------------------- -->
                    <el-form-item label="主题图标" v-if="DistrictArticle.menuType != 2">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="titleIconSuccess"
                            :before-upload="imgBeforeUpload"
                            :data="titleIconMark"
                        >
                            <img v-if="DistrictArticle.titleIcon" :src="DistrictArticles.titleIcon" alt="" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="主题图标签名" v-if="DistrictArticle.menuType != 2">
                        <el-input v-model="DistrictArticle.titleLabel" class="w600"></el-input>
                    </el-form-item>

                    <!-- --------------- 城市商机的标签------------ -->
                    <el-form-item label="软文标签" v-if="DistrictArticle.menuType == 0">
                        <el-input v-model="DistrictArticle.articleLabel" class="w600"></el-input>
                    </el-form-item>
                    <el-form-item label="软文标签取色板" v-if="DistrictArticle.menuType == 0">
                        <el-row>
                            <el-col :span="5"><input type="color" v-model="DistrictArticle.articleLabelBackColor" /></el-col>
                            <el-col :span="2"></el-col>
                            <el-col :span="10">
                                取色板输入: <el-input v-model="DistrictArticle.articleLabelBackColor" class="w300"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>

                    <el-form-item label="主题参数" v-if="DistrictArticle.menuType == 3 || DistrictArticle.menuType == 2">
                        <el-row>
                            <el-col :span="18">
                                <el-input v-model="titleParamItem"></el-input>
                            </el-col>
                            <el-col :span="1"> &nbsp; </el-col>
                            <el-col :span="4">
                                <el-button type="primary" @click="titleParamOnSubmit">提交</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="主题参数表格" v-if="DistrictArticle.menuType == 3 || DistrictArticle.menuType == 2">
                        <el-table :data="titleParamTable" border class="table" header-cell-class-name="table-header">
                            <el-table-column type="index" width="50"> </el-table-column>
                            <el-table-column prop="aaa" label="主题参数" align="center"> </el-table-column>

                            <el-table-column label="操作" align="center" width="200">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="DeleteTitleParam(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <!-- 推荐 -->
                    <el-form-item label="是否展示在推荐页">
                        <el-radio-group v-model="article.isRecommend">
                            <el-radio key="0" :label="0">是</el-radio>
                            <el-radio key="1" :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="作者" v-if="article.isRecommend == 0">
                        <el-input v-model="article.author" style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="作者头像" v-if="article.isRecommend == 0">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="authorHeadImgEvent"
                            :before-upload="imgBeforeUpload"
                            :data="authorHeadImgMark"
                        >
                            <img style="width: 100%" v-if="articles.authorHeadImg" :src="articles.authorHeadImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="主题图" v-if="article.isRecommend == 0">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="titleImgEvent"
                            :before-upload="imgBeforeUpload"
                            :data="titleImgMark"
                        >
                            <img style="width: 100%" v-if="articles.titleImg" :src="articles.titleImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="软文内容" style="width: 1100px">
                        <div class="container">
                            <mavon-editor v-model="richText" ref="md" style="min-height: 600px" />
                            <!-- <el-button class="editor-btn" type="primary" @click="submit">提交</el-button> -->
                        </div>
                    </el-form-item>
                    <el-form-item label=""></el-form-item>

                    <!-- ---------------------------------- -->
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="addVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--     =========================查看   he  编辑======================================       -->
        <el-dialog :visible.sync="setVisible" width="80%" @close="dialogClose">
            <template #title>
                <div>
                    <span v-if="isEdit"> 编辑地区软文</span>
                    <span v-else>查看地区软文</span>
                </div>
                <el-form ref="form" label-width="130px">
                    <el-form-item>
                        <el-form-item label="软文主题">
                            <el-input
                                v-model="article.articleTitle"
                                placeholder="请输入软文主题"
                                class="w600"
                                :disabled="!isEdit"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="软文简介">
                            <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入软文简介"
                                v-model="article.articleIntroduce"
                                class="w600"
                                :disabled="!isEdit"
                            ></el-input>
                        </el-form-item>
                        <h2>地区软文</h2>
                        <el-form-item label="城市">
                            <el-select  placeholder="请选择" v-model="setRegion">
                                <el-option
                                    v-for="item in shiList"
                                    :key="item.id"
                                    :label="item.areaName"
                                    :value="item.id"
                                    @click.native="shiClick(item)"
                                    :disabled="!isEdit"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="地区">
                            <el-select  placeholder="请选择" v-model="setRegions">
                                <el-option
                                    v-for="item in quList"
                                    :key="item.id"
                                    :label="item.areaName"
                                    :value="item.id"
                                    @click.native="quClick(item)"
                                    :disabled="!isEdit"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="详情浏览数">
                            <el-input v-model="article.visitNum" class="w600" :disabled="!isEdit"></el-input>
                        </el-form-item>
                        <el-form-item label="权重值">
                            <el-input v-model="article.orderLevel" class="w600" :disabled="!isEdit"></el-input>
                        </el-form-item>
                        <el-form-item label="导航菜单类型">
                            <el-radio-group v-model="DistrictArticle.menuType">
                                <el-radio :key="0" :label="0" :disabled="!isEdit">城市商机</el-radio>
                                <el-radio :key="1" :label="1" :disabled="!isEdit">城市故事</el-radio>
                                <el-radio :key="2" :label="2" :disabled="!isEdit">城市会友</el-radio>
                                <el-radio :key="3" :label="3" :disabled="!isEdit">特色伴礼</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <!-- // 图片资源组或视频 -->
                        <el-form-item label="选择图片组或视频">
                            <el-radio-group v-model="imgOrVideo">
                                <el-radio :label="0" :disabled="!isEdit">图片</el-radio>
                                <el-radio :label="1" :disabled="!isEdit">视频</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        
                        <el-form-item label="文件资源集合" v-if="imgOrVideo == 0">
                            <el-upload
                                class="upload-demo"
                                :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                list-type="picture"
                                :data="articleResourceListMark"
                                :on-success="articleResourceListSuccess"
                                :disabled='!isEdit'
                              
                            >
                                <el-button size="small" type="primary"   v-if="isEdit">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="软文介绍视频" v-if="imgOrVideo == 1">
                            <el-upload
                                class="avatar-uploader"
                                :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                                :on-success="introduceVideoEvent"
                                :before-upload="videoBeforeUpload"
                                :data="introduceVideoMark"
                                :disabled="!isEdit"
                            >
                                <video
                                    v-if="DistrictArticle.introduceVideo"
                                    :src="DistrictArticles.introduceVideo"
                                    class="avatar"
                                    controls
                                />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="视频封面图" v-if="imgOrVideo == 1">
                            <el-upload
                                class="avatar-uploader"
                                :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                                :on-success="introduceVCSEvent"
                                :before-upload="imgBeforeUpload"
                                :data="introduceVCSMark"
                                :disabled="!isEdit"
                            >
                                <img v-if="DistrictArticle.introduceVCS" :src="DistrictArticles.introduceVCS" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>

                        <!-- -------------------------- -->
                        <el-form-item label="主题图标" v-if="DistrictArticle.menuType != 2">
                            <el-upload
                                class="avatar-uploader"
                                :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                                :show-file-list="false"
                                :on-success="titleIconSuccess"
                                :before-upload="imgBeforeUpload"
                                :data="titleIconMark"
                                :disabled="!isEdit"
                            >
                                <img v-if="DistrictArticle.titleIcon" :src="DistrictArticles.titleIcon" alt="" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="主题图标签名" v-if="DistrictArticle.menuType != 2">
                            <el-input v-model="DistrictArticle.titleLabel" class="w600" :disabled="!isEdit"></el-input>
                        </el-form-item>

                        <!-- --------------- 城市商机的标签------------ -->
                        <el-form-item label="软文标签" v-if="DistrictArticle.menuType == 0">
                            <el-input v-model="DistrictArticle.articleLabel" class="w600" :disabled="!isEdit"></el-input>
                        </el-form-item>
                        <el-form-item label="软文标签取色板" v-if="DistrictArticle.menuType == 0">
                            <el-row>
                                <el-col :span="5"><input type="color" v-model="DistrictArticle.articleLabelBackColor" /></el-col>
                                <el-col :span="2"></el-col>
                                <el-col :span="10">
                                    取色板输入:
                                    <el-input v-model="DistrictArticle.articleLabelBackColor" class="w300" :disabled="!isEdit"></el-input>
                                </el-col>
                            </el-row>
                        </el-form-item>

                        <el-form-item label="主题参数" v-if="DistrictArticle.menuType == 3 || DistrictArticle.menuType == 2">
                            <el-row>
                                <el-col :span="18">
                                    <el-input v-model="titleParamItem" v-if="isEdit"></el-input>
                                </el-col>
                                <el-col :span="1"> &nbsp; </el-col>
                                <el-col :span="4">
                                    <el-button type="primary" @click="titleParamOnSubmit" v-if="isEdit">提交</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="主题参数表格" v-if="DistrictArticle.menuType == 3 || DistrictArticle.menuType == 2">
                            <el-table :data="titleParamTable" border class="table" header-cell-class-name="table-header">
                                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                                <el-table-column prop="aaa" label="主题参数" align="center"> </el-table-column>

                                <el-table-column label="操作" align="center" width="200">
                                    <template slot-scope="scope">
                                        <el-button type="danger" @click="DeleteTitleParam(scope.$index, scope.row)" :disabled="!isEdit"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <!-- 推荐 -->
                        <el-form-item label="是否展示在推荐页">
                            <el-radio-group v-model="article.isRecommend">
                                <el-radio key="0" :label="0" :disabled="!isEdit">是</el-radio>
                                <el-radio key="1" :label="1" :disabled="!isEdit">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="作者" v-if="article.isRecommend == 0">
                            <el-input v-model="article.author" style="width: 250px" :disabled="!isEdit"></el-input>
                        </el-form-item>
                        <el-form-item label="作者头像" v-if="article.isRecommend == 0">
                            <el-upload
                                class="avatar-uploader"
                                :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                                :show-file-list="false"
                                :on-success="authorHeadImgEvent"
                                :before-upload="imgBeforeUpload"
                                :data="authorHeadImgMark"
                                :disabled="!isEdit"
                            >
                                <img style="width: 100%" v-if="articles.authorHeadImg" :src="articles.authorHeadImg" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="主题图" v-if="article.isRecommend == 0">
                            <el-upload
                                class="avatar-uploader"
                                :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                                :show-file-list="false"
                                :on-success="titleImgEvent"
                                :before-upload="imgBeforeUpload"
                                :data="titleImgMark"
                                :disabled="!isEdit"
                            >
                                <img style="width: 100%" v-if="articles.titleImg" :src="articles.titleImg" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="软文内容" style="width: 1100px">
                            <div class="container" :disabled="!isEdit">
                                <mavon-editor v-model="richText" ref="md" style="min-height: 600px" :disabled="!isEdit" />
                                <!-- <el-button class="editor-btn" type="primary" @click="submit">提交</el-button> -->
                            </div>
                            <br>
                            <el-button type="primary" @click="editorOnsubmit" v-if="isEdit"> 富文本提交</el-button>
                        </el-form-item>
                        <el-form-item label=""></el-form-item>

                        <!-- ---------------------------------- -->
                        <el-button type="primary" @click="onSubmits">提交</el-button>
                        <el-button @click="setVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
import VueCropper from 'vue-cropperjs';
import seleSearch from '../common/sele-search';
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
export default {
    name: 'city-base-admin',
    components: {
        VueCropper,
        seleSearch,
        mavonEditor
    },
    data() {
        return {
            // 软文id
            articleId:'',
            // 表单数据
            tableData: [],
            // 表单搜索条件
            search: {
                name: '',
                region: '',
                regions: '',
                searchMenuType: ''
            },
            // 数据
            shiList: [],
            quList: [],
            addRegion: '',
            addRegions: '',
            setRegion: '',
            setRegions: '',
            // 要上传的数据

            article: {
                id: '',
                articleTitle: '',
                articleIntroduce: '',
                isRecommend: 1,
                author: '',
                authorHeadImg: '',
                titleImg: '',
                visitNum: '',
                orderLevel: ''
            },
            articles: {
                authorHeadImg: '',
                titleImg: ''
            },
            DistrictArticle: {
                districtId: '',
                menuType: 0,
                //软文标签
                articleLabel: '',
                articleLabelBackColor: '#5b9bee',
                // 主题标签
                titleParam: '',
                // 主题图标
                titleIcon: '',
                //主题图标签名
                titleLabel: '',
                // 软文视频
                introduceVideo: '',
                // 软文视频封面
                introduceVCS: ''
            },
            DistrictArticles: {
                titleIcon: '',
                introduceVideo: '',
                introduceVCS: ''
            },
            // 编辑市要穿的软文id
            setArticleId: '',
            // 软文资源文件集合
            articleResourceList: [],
            // 展示图片列表
            articleResourceImgList: [],
            fileList: [],
            // 富文本
            richText: '',
            // 判断是否为编辑状态
            isEdit: false,
            isAdd: false,
            // 弹出框的显示
            addVisible: false,
            setVisible: false,
            // 分页操作
            pageNum: 1,
            pageSize: 10,
            pageTotal: 0,
            //
            imgOrVideo: 0,
            // 主题标签表格
            titleParamItem: '',
            titleParamTable: [],
            // 上传标识
            titleIconMark: {
                fileGroup: 'districtArticle',
                fileidentName: 'titleIcon'
            },
            articleResourceListMark: {
                fileGroup: 'districtArticle',
                fileidentName: 'articleResourceList'
            },
            authorHeadImgMark: {
                fileGroup: 'districtArticle',
                fileidentName: 'authorHeadImg'
            },
            titleImgMark: {
                fileGroup: 'districtArticle',
                fileidentName: 'titleImg'
            },
            introduceVideoMark: {
                fileGroup: 'districtArticle',
                fileidentName: 'introduceVideo'
            },
            introduceVCSMark: {
                fileGroup: 'districtArticle',
                fileidentName: 'introduceVCS'
            }
        };
    },
    created() {
        this.getData();
        this.getshiList();
    },
    methods: {
        // 富文本提交
        editorOnsubmit(){
           axios.put(this.$myUrl.BASEURL + 'article/updateArticleDetail',{
              articleId: this.articleId,
              richText: this.richText
           }).then( res => {
               console.log(res);
               if (res.data.code == 200) {
                   this.$message.success('富文本提交成功')
               }
           })
        },
        // 获取数据
        getData() {
            axios
                .get(this.$myUrl.BASEURL + 'districtArticle/getDistrictArticleList?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize)
                .then((res) => {
                    console.log('地区软文数据', res);
                    this.tableData = res.data.data;
                    this.pageTotal = res.data.totalNumber;
                });
        },

        // 搜索
        baseSearch() {
            // this.tableData = [];
            let isSearchMenuType = this.search.searchMenuType == '' ? '' : `menuType=${this.search.searchMenuType}`;
            let isRegion = this.search.region == '' ? '' : `&cityId=${this.search.region}`;
            let isRegions = this.search.regions == '' ? '' : `&districtId=${this.search.regions}`;
            axios
                .get(
                    this.$myUrl.BASEURL +
                        'districtArticle/getDistrictArticleList?' +
                        isSearchMenuType +
                        isRegion +
                        isRegions +
                        '&articleTitle=' +
                        this.search.name +
                        '&pageNum=' +
                        this.pageNum +
                        '&pageSize=' +
                        this.pageSize
                )
                .then((res) => {
                    console.log('搜索', res);
                    this.tableData = res.data.data;
                    this.pageTotal = res.data.totalNumber;
                });
        },
        // 编辑按钮
        handleEdit(index, row) {
            console.log(row);
            this.setRegion = row.cityId;
            axios.get(this.$myUrl.BASEURL + 'district/getDistrictBasicList?cityId=' + row.cityId).then((res) => {
                this.quList = res.data.data;
            });
            this.isEdit = true;
            this.isAdd = false;
            this.setVisible = true;
            axios.get(this.$myUrl.BASEURL + 'districtArticle/getDistrictArticle?articleId=' + row.articleId).then((res) => {
                console.log('查看软文详情', res);
                this.article = res.data.data.article;
                this.DistrictArticle = res.data.data.districtArticle;
                this.richText = res.data.data.richText;
                this.setRegions = res.data.data.districtArticle.districtId;

                // res.data.data.articleResourceList.forEach((item) => {
                //     this.articleResourceImgList.push(this.$myUrl.IMGURL + item);
                // });
                //
                this.articles.authorHeadImg = this.$myUrl.IMGURL + res.data.data.article.authorHeadImg;
                this.articles.titleImg = this.$myUrl.IMGURL + res.data.data.article.titleImg;
                this.DistrictArticles.titleIcon = this.$myUrl.IMGURL + res.data.data.districtArticle.titleIcon;
                this.DistrictArticles.introduceVideo = this.$myUrl.IMGURL + res.data.data.districtArticle.introduceVideo;
                this.DistrictArticles.introduceVCS = this.$myUrl.IMGURL + res.data.data.districtArticle.introduceVCS;

                // 新文件资源展示
                this.articleResourceList = res.data.data.articleResourceList;
                this.fileList = [];
                res.data.data.articleResourceList.forEach((item) => {
                    this.fileList.push({
                        name: '图片',
                        url: this.$myUrl.IMGURL + item
                    });
                });
                // 主题参数
                this.titleParamTable = [];
                res.data.data.districtArticle.titleParam.split(',').forEach((item) => {
                    this.titleParamTable.push({ aaa: item });
                });
                //   alert(res.data.data.articleResourceList.length)
                if (res.data.data.articleResourceList.length == 0) {
                    this.imgOrVideo = 1;
                } else {
                    this.imgOrVideo = 0;
                }

                // 获取软文id
                   this.articleId   =   res.data.data.districtArticle.articleId
            });
        },
        // 查看按钮
        toDetail(index, row) {
            console.log(row);
            this.setRegion = row.cityId;
            axios.get(this.$myUrl.BASEURL + 'district/getDistrictBasicList?cityId=' + row.cityId).then((res) => {
                this.quList = res.data.data;
            });
            this.isEdit = false;
            this.isAdd = false;
            this.setVisible = true;
            axios.get(this.$myUrl.BASEURL + 'districtArticle/getDistrictArticle?articleId=' + row.articleId).then((res) => {
                console.log('查看软文详情', res);
                this.article = res.data.data.article;
                this.DistrictArticle = res.data.data.districtArticle;
                this.richText = res.data.data.richText;
                this.setRegions = res.data.data.districtArticle.districtId;

                // res.data.data.articleResourceList.forEach((item) => {
                //     this.articleResourceImgList.push(this.$myUrl.IMGURL + item);
                // });
                //
                this.articles.authorHeadImg = this.$myUrl.IMGURL + res.data.data.article.authorHeadImg;
                this.articles.titleImg = this.$myUrl.IMGURL + res.data.data.article.titleImg;
                this.DistrictArticles.titleIcon = this.$myUrl.IMGURL + res.data.data.districtArticle.titleIcon;
                this.DistrictArticles.introduceVideo = this.$myUrl.IMGURL + res.data.data.districtArticle.introduceVideo;
                this.DistrictArticles.introduceVCS = this.$myUrl.IMGURL + res.data.data.districtArticle.introduceVCS;

                // 新文件资源展示
                this.articleResourceList = res.data.data.articleResourceList;
                this.fileList = [];
                res.data.data.articleResourceList.forEach((item) => {
                    this.fileList.push({
                        name: '图片',
                        url: this.$myUrl.IMGURL + item
                    });
                });
                // 主题参数
                this.titleParamTable = [];
                res.data.data.districtArticle.titleParam.split(',').forEach((item) => {
                    this.titleParamTable.push({ aaa: item });
                });
                //   alert(res.data.data.articleResourceList.length)
                if (res.data.data.articleResourceList.length == 0) {
                    this.imgOrVideo = 1;
                } else {
                    this.imgOrVideo = 0;
                }
            });
        },
        // 新增按钮
        addCity() {
            this.isAdd = true;

            this.addVisible = true;
            // 更改部分默认值
            this.DistrictArticle.menuType = 0;
            this.article.isRecommend = 1;
            this.DistrictArticle.articleLabelBackColor = '#5b9bee';
            this.imgOrVideo = 0;
        },
        // 新增提交事件
        onSubmit() {
            // 提交请求的封装 onSubmitFn()
            let onSubmitFn = () => {
                axios
                    .post(this.$myUrl.BASEURL + 'districtArticle/addDistrictArticle', {
                        article: this.article,
                        districtArticle: this.DistrictArticle,
                        //资源集合
                        articleResourceList: this.articleResourceList,
                        richText: this.richText
                    })
                    .then((res) => {
                        console.log('新增地区软文成功', res);
                        if (res.data.code == 200) {
                            this.$message.success('新增地区软文成功');
                            this.getData();
                            this.addVisible = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            };
            //
            if (this.article.articleTitle === '') {
                this.$message.error('请输入软文主题');
            } else if (this.article.articleTitle.length >= 60) {
                this.$message.error('软文主题过长');
            } else if (this.article.articleIntroduce === '') {
                this.$message.error('请输入软文简介');
            } else if (this.addRegion === '') {
                this.$message.error('请选择市');
            } else if (this.addRegions === '') {
                this.$message.error('请选择区');
            } else if (isNaN(this.article.visitNum)) {
                this.$message.error('详情浏览数只能填数字且必填!');
            } else if (isNaN(this.article.orderLevel)) {
                this.$message.error('权重值只能填数字且必填!');
            } else if (isNaN(this.article.orderLevel)) {
                this.$message.error('权重值只能填数字且必填!');
            } else if (
                (this.DistrictArticle.introduceVideo == '' || this.DistrictArticle.introduceVCS == '') &&
                this.articleResourceList.length == 0
            ) {
                this.$message.error('文件资源类型  或  视频及视频封面 必选一项!');
            } else if (this.DistrictArticle.menuType != 2) {
                if (this.DistrictArticle.titleIcon == '') {
                    this.$message.error('请上传主题图标');
                } else if (this.DistrictArticle.titleLabel == '') {
                    this.$message.error('请输入主题图标签名');
                } 
                else if (this.DistrictArticle.titleLabel.length > 12) {
                    this.$message.error('主题图标签名过长');
                }
                 else {
                    if (this.article.isRecommend === 0) {
                        if (this.article.author == '') {
                            this.$message.error('请输入作者');
                        } else if (this.article.authorHeadImg == '') {
                            this.$message.error('请上传作者头像');
                        } else if (this.article.titleImg == '') {
                            this.$message.error('请上传主题图');
                        } else {
                            onSubmitFn();
                        }
                    } else {
                        onSubmitFn();
                    }
                }
            } else if (this.article.isRecommend == 0) {
                if (this.article.author == '') {
                    this.$message.error('请输入作者');
                } else if (this.article.authorHeadImg == '') {
                    this.$message.error('请上传作者头像');
                } else if (this.article.titleImg == '') {
                    this.$message.error('请上传主题图');
                } else {
                    onSubmitFn();
                } 
            } else {
                onSubmitFn();
            }
        },

        // 编辑提交
        onSubmits() {
            let onSubmitFn = () => {
                axios
                    .put(this.$myUrl.BASEURL + 'districtArticle/updateDistrictArticle', {
                        article: this.article,
                        districtArticle: this.DistrictArticle,
                        //资源集合
                        articleResourceList: this.articleResourceList,
                        richText: this.richText
                    })
                    .then((res) => {
                        console.log('新增地区软文成功', res);
                        if (res.data.code == 200) {
                            this.$message.success('编辑地区软文成功');
                            this.getData();
                            this.setVisible = false;
                        }
                    });
            };
            if (this.article.articleTitle === '') {
                this.$message.error('请输入软文主题');
            } else if (this.article.articleTitle.length >= 60) {
                this.$message.error('软文主题过长');
            } else if (this.article.articleIntroduce === '') {
                this.$message.error('请输入软文简介');
            } else if (this.setRegion === '') {
                this.$message.error('请选择市');
            } else if (this.setRegions === '') {
                this.$message.error('请选择区');
            } else if (isNaN(this.article.visitNum)) {
                this.$message.error('详情浏览数只能填数字且必填哦');
            } else if (isNaN(this.article.orderLevel)) {
                this.$message.error('权重值只能填数字且必填哦');
            } else if (this.DistrictArticle.menuType != 2) {
                if (this.DistrictArticle.titleIcon == '') {
                    this.$message.error('请上传主题图标');
                } else if (this.DistrictArticle.titleLabel == '') {
                    this.$message.error('请输入主题图标签名');
                } else {
                    if (this.article.isRecommend === 0) {
                        if (this.article.author == '') {
                            this.$message.error('请输入作者');
                        } else if (this.article.authorHeadImg == '') {
                            this.$message.error('请上传作者头像');
                        } else if (this.article.titleImg == '') {
                            this.$message.error('请上传主题图');
                        } else {
                            onSubmitFn();
                        }
                    } else {
                        onSubmitFn();
                    }
                }
            } else if (this.article.isRecommend === 0) {
                if (this.article.author == '') {
                    this.$message.error('请输入作者');
                } else if (this.article.authorHeadImg == '') {
                    this.$message.error('请上传作者头像');
                } else if (this.article.titleImg == '') {
                    this.$message.error('请上传主题图');
                } else {
                    onSubmitFn();
                }
            } else {
                onSubmitFn();
            }
        },
        // 获取市的数据
        getshiList() {
            axios.get(this.$myUrl.BASEURL + 'city/getCityBasicList').then((res) => {
                this.shiList = res.data.data;
            });
        },
        //  市的下拉点击
        shiClick(e) {
            this.quList = []
            this.search.regions = '';
            console.log('--------市-------', e);
            axios.get(this.$myUrl.BASEURL + 'district/getDistrictBasicList?cityId=' + e.id).then((res) => {
                console.log(res);
                this.quList = res.data.data;
            });
            this.addRegions = '';
        },

        //  区的下拉点击
        quClick(e) {
            console.log('-----------区----------', e);
            // 新增所需市的参数
            this.DistrictArticle.districtId = e.id;
        },

        // 删除操作
        handleDelete(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                axios.delete(this.$myUrl.BASEURL + 'article/deleteArticle?articleId=' + row.articleId).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success('删除成功');
                        this.baseSearch();
                    } else {
                        this.$message.error('删除失败');
                    }
                });
            });
        },

        // 分页操作
        handleCurrentChange(val) {
            this.pageNum = val;
            this.baseSearch();
            console.log(`当前页: ${val}`);
        },

        // 图片视频上传之前的限制
        imgBeforeUpload(file) {
            const isIMG = file.type === 'image/jpeg' ||  file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
                        if (!isIMG) {
                            this.$message.error('只能上传 JPG/PNG 格式图片!');
                        }
            return isIMG && isLt2M;
        },
        videoBeforeUpload(file) {
            console.log(file.type);
            const isVideo = file.type === 'video/mp4';
            const isLt30M = file.size / 1024 / 1024 < 30;

            if (!isVideo) {
                this.$message.error('只能上传视频!');
            }
            if (!isLt30M) {
                this.$message.error('上传视频大小不能超过 30MB!');
            }
            return isVideo && isLt30M;
        },
        // 主题图标
        titleIconSuccess(res) {
            this.DistrictArticle.titleIcon = res.data.relativePath;
            this.DistrictArticles.titleIcon = this.$myUrl.IMGURL + res.data.relativePath;
        },

        // 资源集合上传的钩子函数
        articleResourceListSuccess(res, file) {
            console.log(res);
            this.articleResourceList.push(res.data.relativePath);
            this.articleResourceImgList.push(this.$myUrl.IMGURL + res.data.relativePath);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        handleRemove(file, fileList) {
            console.log(file.response);
            if (file.response == undefined) {
                this.articleResourceList.remove(file.url.split(this.$myUrl.IMGURL)[1]);
            } else {
                this.articleResourceList.remove(file.response.data.relativePath);
            }
            // console.log('file', file);
            // console.log('fileList', fileList);
            // console.log(file.url.split(this.$myUrl.IMGURL)[1]);
            // if (this.isAdd) {
            //     this.articleResourceList.remove(file.response.data.relativePath);
            // } else {
            //     this.articleResourceList.remove(file.url.split(this.$myUrl.IMGURL)[1]);
            // }

            // return this.$confirm('是否删除该文件, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
            //     //  console.log(file.response.data.relativePath);

            //     this.articleResourceImgList = [];
            //     this.articleResourceList.forEach((item) => {
            //         this.articleResourceImgList.push(this.$myUrl.IMGURL + item);
            //     });
            //     console.log(this.articleResourceList);
            //     console.log(this.articleResou);
            //     this.$message({
            //         type: 'success',
            //         message: '删除成功!'
            //     });
            // });
            // return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 头像
        authorHeadImgEvent(res) {
            console.log();
            this.article.authorHeadImg = res.data.relativePath;
            this.articles.authorHeadImg = this.$myUrl.IMGURL + res.data.relativePath;
        },
        // 主题图titleImg
        titleImgEvent(res) {
            this.article.titleImg = res.data.relativePath;
            this.articles.titleImg = this.$myUrl.IMGURL + res.data.relativePath;
        },
        // 软文介绍图及封面
        introduceVideoEvent(res) {
            this.DistrictArticle.introduceVideo = res.data.relativePath;
            this.DistrictArticles.introduceVideo = this.$myUrl.IMGURL + res.data.relativePath;
        },
        introduceVCSEvent(res) {
            this.DistrictArticle.introduceVCS = res.data.relativePath;
            this.DistrictArticles.introduceVCS = this.$myUrl.IMGURL + res.data.relativePath;
        },
        //特色伴礼 主题参数点击
        titleParamOnSubmit() {
            if (this.titleParamItem == '') {
                this.$message.error('请输入内容再提交');
            } else {
                this.titleParamTable.push({ aaa: this.titleParamItem });
                // this.titleParamTable = this.titleParamTable.join(',')
            }

            this.titleParamItem = '';
            this.DistrictArticle.titleParam = this.titleParamTable
                .map((item) => {
                    return item.aaa;
                })
                .join(',');
        },
        DeleteTitleParam(index, row) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.titleParamTable.splice(index, 1);
                this.DistrictArticle.titleParam = this.titleParamTable
                    .map((item) => {
                        return item.aaa;
                    })
                    .join(',');
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            });
        },
        // 关闭弹窗清楚数据
        dialogClose() {
            this.fileList = []
            this.addRegion = ''
            this.addRegions = ''
            this.quList = []
            this.article = {
                id: '',
                articleTitle: '',
                articleIntroduce: '',
                isRecommend: 1,
                author: '',
                authorHeadImg: '',
                titleImg: '',
                visitNum: '',
                orderLevel: ''
            };
            this.articles = {
                authorHeadImg: '',
                titleImg: ''
            };
            (this.DistrictArticle = {
                districtId: '',
                menuType: 0,
                //软文标签
                articleLabel: '',
                articleLabelBackColor: '#5b9bee',
                // 主题标签
                titleParam: '',
                // 主题图标
                titleIcon: '',
                //主题图标签名
                titleLabel: '',
                // 软文视频
                introduceVideo: '',
                // 软文视频封面
                introduceVCS: ''
            }),
                (this.DistrictArticles = {
                    titleIcon: '',
                    introduceVideo: '',
                    introduceVCS: ''
                }),
                (this.titleParamTable = []);
            this.richText = '';

            this.articleResourceList = [];
            this.articleResourceImgList = [];
        }
    }
};
</script>
 
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.ipt /deep/ {
    display: inline-block;
    background-color: #ccc;
}
.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 100px;
    text-align: center;
}
.el-form-item /deep/ .el-upload {
    width: 200px;
    height: 100px;
}
.mr {
    margin-right: 5px;
}
.w600 {
    width: 600px;
}
.w300 {
    width: 300px;
}
.avatar-uploader img {
    width: 100%;
    height: 100%;
}
.avatar-uploader video {
    width: 100%;
    height: 100%;
}
</style>
